<template>
  <div>
    <div class="els-select">
      <el-select
        v-model="BindForm.provinceId"
        :style="`${selectStyle}`"
        clearable
        @change="handelProvince"
        @clear="handelClear"
      >
        <el-option
          v-for="(item, index) in pca.province"
          :key="index"
          :value="item.id"
          :label="item.name"
        />
      </el-select>
      <el-select
        v-model="BindForm.cityId"
        clearable
        :style="`${selectStyle}`"
        @change="handelCity"
        @clear="handelCityClear"
      >
        <el-option
          v-for="(item, index) in pca.forCiry"
          :key="index"
          :value="item.id"
          :label="item.name"
        />
      </el-select>
      <el-select
        v-model="BindForm.areaId"
        clearable
        :style="`${selectStyle}`"
        @change="handelArea"
        @clear="handelAreaClear"
      >
        <el-option
          v-for="(item, index) in pca.forArea"
          :key="index"
          :value="item.id"
          :label="item.name"
        />
      </el-select>
    </div>
  </div>
</template>

<script>
import { getCityList } from '@/api/auth'
export default {
  name: 'Select',
  props: {
    // 切换成value = code
    switching: {
      type: Boolean,
      default: true
    },
    selectStyle: {
      type: String,
      default: ''
    },
    model: {
      type: [Object, Array],
      default: undefined
    }
  },
  data() {
    return {
      // 配送区域
      province: '',
      city: '',
      area: '',
      pCityArea: [],
      pca: {
        // 省区
        province: [],
        // 需要循环遍历的城区和市区
        city: [],
        area: [],
        // 最后拿到的 城区和市区 select 列表
        forCiry: [],
        forArea: []
      },
      BindForm: {
        provinceId: '',
        provinceName: '',
        cityId: '',
        cityName: '',
        areaId: '',
        areaName: ''
      }
    }
  },
  watch: {
    model(newValue, oldValue) {
      this.BindForm = {
        provinceId: '',
        provinceName: '',
        cityId: '',
        cityName: '',
        areaId: '',
        areaName: ''
      }
    }
  },
  mounted() {
    getCityList()
      .then(result => {
        this.pca.province = []
        this.pca.city = []
        this.pca.area = []
        result.data.data.forEach(inf => {
          this.pca.province.push(inf.province)
          inf.cityRegion.forEach(reg => {
            this.pca.city.push(reg.city) // 拿市区
            reg.village.forEach(vil => {
              this.pca.area.push(vil) // 拿城区
            })
          })
        })
        // this.provinceCity()
      })
      .catch(err => {
        console.log(err)
      })
  },
  methods: {
    /** 省区清空 */
    handelClear() {
      this.$emit('handelClear')
    },
    /** 区/县清空 */
    handelAreaClear() {
      this.$emit('handelAreaClear')
    },
    /** 市区清空 */
    handelCityClear() {
      this.BindForm.areaId = ''
      this.$emit('handelCityClear')
    },
    /** 区 */
    handelArea(v) {
      if (v) {
        this.BindForm.areaName = this.pca.area.find(inf => {
          return inf.id === v
        }).name
        this.$emit(
          'handelArea',
          v,
          this.BindForm.areaName,
          this.pca.area.find(inf => {
            return inf.id === v
          }).code
        )
      }
    },
    /** 市 */
    handelCity(v) {
      if (v) {
        this.BindForm.areaId = ''
        this.pca.forArea = []
        this.pca.area.forEach(inf => {
          if (inf.pid === v) {
            this.pca.forArea.push(inf)
          }
        })
        this.BindForm.cityName = this.pca.city.find(inf => {
          return inf.id === v
        }).name
        // v 选中的id, 选中的名称
        this.$emit(
          'handelCity',
          v,
          this.BindForm.cityName,
          this.pca.city.find(inf => {
            return inf.id === v
          }).code
        )
      }
    },
    /** 省 */
    handelProvince(v) {
      this.pca.forCiry = []
      this.pca.forArea = []
      this.BindForm.cityId = ''
      this.BindForm.areaId = ''
      if (v) {
        this.pca.city.forEach(inf => {
          if (inf.pid === v) {
            this.pca.forCiry.push(inf)
          }
        })
        // console.log(this.pca.province, 'this.pca.province')
        this.$emit(
          'handelProvince',
          v,
          this.pca.province.find(inf => inf.id === v).name,
          this.pca.province.find(inf => inf.id === v).code
        )
      }
    },
    /** 修改时初始化 */
    provinceCity() {
      this.pca.city.forEach(inf => {
        if (inf.pid === this.$route.params.row.provinceId) {
          this.pca.forCiry.push(inf)
        }
      })
      this.pca.area.forEach(inf => {
        if (inf.pid === this.$route.params.row.cityId) {
          this.pca.forArea.push(inf)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.els-select {
  display: flex;
  .el-select {
    margin-left: 20px;
  }
}
</style>
